<template>
		<view class="page">
			<view class="from_item">
				<view class="label">条形码</view>
				<view class="right">
					<input
						v-model="params.spackBarCode"
						class="uni-input"
						type="number"
						focus
						@input="replaceInput()"
					/>
					<uni-icons class="icon" type="scan" size="30"></uni-icons>
				</view>
			</view>
			<view class="from_item">
				<view class="label">订单</view>
				<view class="">{{ params.sorderNo }}</view>
			</view>
			<view class="from_item">
				<view class="label">颜色</view>
				<view class="">{{ params.scolorName }}</view>
			</view>
			<view class="from_item">
				<view class="label">尺码</view>
				<view class="">{{ params.ssizeName }}</view>
			</view>
			<view class="from_item">
				<view class="label">任务数</view>
				<view class="">{{ params.taskNum }}</view>
			</view>
			<view class="from_item">
				<view class="label">已报工数</view>
				<view class="">{{ params.sendNum }}</view>
			</view>
			<view class="from_item">
				<view class="label">报工数</view>
				<view class="">
					<input
						v-model="params.iqty"
						class="uni-input iqty"
						type="number"
						placeholder="请输入"
						@input="handIqtyChange()"
					/>
				</view>
			</view>
			<view class="from_item">
				<view class="label">工序选择</view>
				<view class="seq">
					<uni-data-checkbox
						multiple v-model="value"
						:localdata="sprocedureNameList"
						@change="bindPickerChange">
					</uni-data-checkbox>
				</view>
			</view>
			<view class="from_item">
				<view class="label">报工时间</view>
				<view class="">{{ new Date() | formatDate }}</view>
			</view>
			<view class="from_item">
				<view class="label">修改时间</view>
				<view class="">{{ new Date() | formatDate }}</view>
			</view>
			<button class="save" @click="save()" size="default" type="primary">保存</button>
		</view>
</template>

<script>
import rfidOutput from "@/api/fuzhuang/rfidOutput"
	export default {
		data() {
			return {
				params: {
					scolorId: "",
					scolorName: "",
					semployeeName: "",
					semployeeNo: "",
					sendNum: "",
					sorderNo: "",
					nprices: "",
					spackBarCode: "",
					sprocedureId: "",
					unSprocedureId: "",
					sprocedureName: "",
					unSprocedureName: "",
					ssizeId: "",
					ssizeName: "",
					sstyleNo: "",
					taskNum: "",
					iqty: ""
				},
				sprocedureNameList: [],
				sprocedureIdList: [],
				timer: null,
				index: 0,
				value: [],
			}
		},
		created() {
			// this.init()
		},
		onLoad(query) {
			if (query.sbillNo) {
				this.getInfo(query.sbillNo)
			}
			uni.hideKeyboard();
		},
		methods: {
			getInfo(sbillNo) {
				uni.showLoading({
					title: '加载中'
				});
				const params = {
					sbillNo,
				}
				rfidOutput.queryOutputDataInfo(params).then(res => {
					this.params = Object.assign(this.params, res);
					const	sprocedureNameList = this.params.unSprocedureName.split(",");
					const sprocedureIdList = this.params.sprocedureId.split(",");
					const npricesList = this.params.unNprices.split(",");
					const arr = [];
					for (var index = 0; index < sprocedureNameList.length; index++) {
						const obj = {
							text: sprocedureNameList[index],
							value: sprocedureIdList[index],
							prices: npricesList[index] || 0
						}
						arr.push(obj);
					}
					this.sprocedureNameList = arr;
					this.value = sprocedureIdList;
					uni.hideLoading();
				})
			},
			replaceInput() {
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getInitData(this.params.spackBarCode);
					this.timer = null;
				},1000)
			},
			bindPickerChange(e) {
				this.params.sprocedureId = e.detail.value.join(",");
				this.params.sprocedureName = e.detail.data.map(item => item.text).join(",");
				this.params.nprices = e.detail.data.map(item => item.prices).join(",");
				console.log(this.params)
			},
			handIqtyChange() {
				if (Number(this.params.iqty) +
						Number(this.params.sendNum) >
						Number(this.params.taskNum)) {
					uni.showToast({
						title: "报工数过多",
						duration: 2000,
						icon: "error"
					});
					return false
				}
			},
			getInitData(spackBarCode) {
				// 2501080001
				const params = {
					spackBarCode
				}
				rfidOutput.queryReportInfoByBarCode(params).then(res => {
					if (JSON.stringify(res) === "{}") {
						uni.showToast({
							title: "无数据",
							duration: 2000,
							icon: "error"
						});
						return false
					}
					uni.showLoading({
						title: '加载中'
					});
					this.params = Object.assign(this.params, res);
					const	sprocedureNameList = this.params.unSprocedureName.split(",");
					const sprocedureIdList = this.params.unSprocedureId.split(",");
					const npricesList = this.params.unNprices.split(",");
					const arr = [];
					for (var index = 0; index < sprocedureNameList.length; index++) {
						const obj = {
							text: sprocedureNameList[index],
							value: sprocedureIdList[index],
							prices: npricesList[index]
						}
						arr.push(obj);
					}
					this.sprocedureNameList = arr;
					this.value = sprocedureIdList;
					this.params.sprocedureId = this.params.unSprocedureId;
					this.params.sprocedureName = this.params.unSprocedureName;
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			save() {
				uni.showLoading({
					title: '加载中'
				});
				const params = JSON.parse(JSON.stringify(this.params));
				rfidOutput.doReport(params).then(res => {
					uni.$emit('refreshData');
					uni.navigateBack();
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: rgb(242, 242, 242);
	}
	.page {
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 10px;
		min-height: 200px;
		background-color: white;
		padding-bottom: 20rpx;
	}
	.from_item {
		min-height: 100rpx;
		padding: 10px 20px;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
	}
	.label {
		font-size: 16px;
		flex: 1;
		font-weight: bold;
	}
	.right {
		position: relative;
	}
	.right input {
		text-align: right;
		padding-right: 10px;
		position: relative;
		right: 60rpx;
		top: 4px;
		width: 300rpx;
	}
	.iqty {
		text-align: right;
		padding-right: 10px;
		position: relative;
		right: -20rpx;
		top: 4px;
		width: 300rpx;
		font-size: 30rpx;
	}
	.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.save {
		margin-top: 10px;
		width: 90%;
	}
	.seq {
		max-width: 400rpx;
		float: right;
	}
</style>